<!--
 * @Author: your name
 * @Date: 2021-10-26 20:52:46
 * @LastEditTime: 2021-10-26 21:15:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\admin\componentsPage\verify.vue
-->
<template>
    <div class="mapcontent">
        <Row>
            <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 12 }">
                <Card style="background: transparent">
                    <template #title>
                        <div class="card_title">
                            <div>
                                <p>地图下穿：</p>
                                <p>河北-廊坊</p>
                            </div>
                            <div>
                                <Button
                                    size="small"
                                    :disabled="mapHistory.length < 2"
                                    @click="onPremaps"
                                >
                                    上一级{{ mapHistory[mapHistory.length - 2] }}
                                </Button>
                            </div>
                        </div>
                    </template>
                    <div class="mapA">
                        <VEmap ref="Vemap" :datas="mdata" @handlemaps="handlemaps"></VEmap>
                    </div>
                </Card>
            </Col>
            <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 12 }">
                <Card style="background: transparent">
                    <template #title>
                        <div class="card_title">
                            <div><p>热力图-支持不同地形展示</p></div>
                        </div>
                    </template>
                    <div class="mapA">
                        <VHeartmap :datas="mdata"></VHeartmap>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { Card, Button, Row, Col } from 'ant-design-vue'
import VHeartmap from './components/heartmap.vue'
import VEmap from './components/emap.vue'
import { mdatas } from './components/data'

export default defineComponent({
    name: 'Varify',
    components: {
        Card,
        VEmap,
        VHeartmap,
        Button,
        Row,
        Col,
    },
    setup() {
        let mdata = mdatas
        const Vemap = ref()
        let mapHistory = ref()
        mapHistory.value = []
        // 地图缓存
        const handlemaps = (e) => {
            mapHistory.value.push(e)
        }
        // 上一级 每次删除最后一级
        const onPremaps = () => {
            mapHistory.value.pop()
            let len = mapHistory.value.length - 1
            Vemap.value.changeMaps(mapHistory.value[len])
        }
        return {
            handlemaps,
            onPremaps,
            mapHistory,
            Vemap,
            mdata,
        }
    },
})
</script>

<style lang="less" scoped>
.mapcontent {
  background: #535262;
}
.card_title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  & > div {
    display: flex;
    align-items: center;
    height: 20px;
    justify-content: center;
    line-height: 20px;
    & > p {
      font-size: 12px;
      display: inline-block;
      margin: 0;
      color: #fff;
    }
  }
}
</style>
